<template>
	<view id="app">
		<view class="container fdc">
			<view class="df fdc aic bgcef w100p ptb20 plr20 mb20">
				<button type="default" open-type="chooseAvatar" @chooseavatar="avataraction" class="avatarBtn"  hover-class="none">
					<image :src="avatarUrl"></image>
					<view class="edit"><uv-icon name="edit-pen" color="#999" size="150rpx"></uv-icon></view>
				</button>
			</view>
			<view class="rows bgw ptb20 mb20 jcc">
				<view class="w150 f28 c666 pl20">微信昵称</view>
				<view class="f1">
					<uv-input type="nickname" placeholder="选择昵称" border="none" v-model="nickname" @change="changeNickname"></uv-input>
				</view>
			</view>
			<view class="h340"></view>
			<view class="df fdc aic">
				<view class="btn">
					<uv-button color="#145cfe" iconColor="#fff" @click="submitUserinfo()" text="提交"></uv-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				avatarUrl:"",
				nickname:""
			}
		},
		onLoad(){
			that = this;
			this.getUserInfo();
		},
		methods: {
			changeNickname:function(e){
				console.log(e);
			},
			submitUserinfo(){
				if(this.avatarUrl == ''){
					this.util.alert('请上传头像');
					return false;
				}
				if(this.nickname == ''){
					this.util.alert('请填写昵称');
					return false;
				}
				this.request({
					url:"/api/user/avatar",
					data:{avatar:this.avatarUrl,nickname:this.nickname},
					success:function(rlt){
						if(rlt.code == '200'){
							that.util.alert('修改成功');
							setTimeout(function(){
								uni.navigateBack();
							},1000);
						}
					}
				})
			},
			getToken(e){
				console.log(e);
				return this.request({url:"/api/common/qntoken",data:{'file':e.detail.avatarUrl}});
			},
			 async avataraction (e){
				let res = await this.getToken(e);
				console.log(res);
				this.qnUpload.upload(e.detail.avatarUrl,function(rlt){
					console.log(rlt);
					that.avatarUrl = res.data.cdnurl+rlt.imageURL;
					console.log(that.avatarUrl);
				},function(e){
					console.log(e);
				},{
					region: 'NCN',
					uptoken: res.data.token,
					key:res.data.filename,
				});
			},
			getUserInfo:function(){
				this.request({
					url:"/api/user/info",
					success:function(rlt){
						that.avatarUrl = rlt.data.avatar;
						that.nickname = rlt.data.nickname;
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.bgcef{background-color: #e6ecfc;}
	.avatarBtn{padding:0 !important; background-color: #e6ecfc !important;border: 0 solid #e6ecfc !important;
	line-height: 1.0; font-size: 28rpx;display: flex; flex-direction: column;width:320rpx;height:320rpx; position: relative;}
	.avatarBtn::after{border:initial;}
	.avatarBtn image{border-radius: 50%;}
	.avatarBtn .edit{position: absolute; top: 70rpx;left: 95rpx;;width:150rpx;height: 150rpx;}
	.btn{width:480rpx;}
</style>
